package com.example.myapplication.base

import com.example.sihookuiklydemo.base.BasePager
import com.example.sihookuiklydemo.ble.getNewFloatPx
import com.tencent.kuikly.core.base.*
import com.tencent.kuikly.core.base.attr.ImageUri
import com.tencent.kuikly.core.module.RouterModule
import com.tencent.kuikly.core.reactive.handler.observable
import com.tencent.kuikly.core.views.Image
import com.tencent.kuikly.core.views.Text
import com.tencent.kuikly.core.views.View

internal class NavBarView : ComposeView<NavBarViewAttr, NavBarViewEvent>() {

    override fun createEvent(): NavBarViewEvent {
        return NavBarViewEvent()
    }

    override fun createAttr(): NavBarViewAttr {
        return NavBarViewAttr()
    }

    override fun body(): ViewBuilder {
        val ctx = this
        return {
            View {
                attr {
                    size(pagerData.pageViewWidth, getNewFloatPx(48f))
                    marginTop(pagerData.statusBarHeight)
                    allCenter()
                    backgroundColor(Color.TRANSPARENT)
                }
                /*View{
                    attr {
                        backgroundColor(Color.RED)
                        absolutePosition()
                        size(ctx.pagerData.pageViewWidth,1f)
                        top(24f)
                    }
                }*/
                Image {
                    attr {
                        size(getNewFloatPx(32f), getNewFloatPx(32f))
                        src(ImageUri.commonAssets("ic_back.png"))

                        if (ctx.attr.isDarkMode) {
                            tintColor(Color.WHITE)
                        }
                        resizeContain()
                        absolutePosition(
                            left = getNewFloatPx(15f),
                            top = (getNewFloatPx(48f - 32f)) / 2
                        )

                    }
                    event {
                        click {
                            if (ctx.event.finishClickHandler == null) {
                                ctx.acquireModule<RouterModule>(RouterModule.MODULE_NAME)
                                    .closePage()
                            } else {
                                ctx.event.finishClickHandler?.invoke()
                            }

                        }
                    }
                }
                View {
                    attr {
                        flexDirectionRow()
                        size(getNewFloatPx(40f), getNewFloatPx(40f))
                        padding(getNewFloatPx(16f))
                        justifyContentCenter()
                        absolutePosition(right =12f, top =0f)
                    }
                    event {
                        click {
                            ctx.event.rightClickHandler?.invoke()
                        }
                    }
                    View {
                        attr { flex(1f) }
                    }
                    Image {
                        attr {
                            size(getNewFloatPx(16f), getNewFloatPx(16f))
                            src(ImageUri.commonAssets("ic_d04_more.png"))
                            resizeContain()
                            if (ctx.attr.isDarkMode) {
                                tintColor(Color.WHITE)
                            }
                            visibility(ctx.attr.rightIconShow)
                        }

                    }
                }

                Text {
                    attr {
                        fontWeightBold()
                        maxWidth(200f)
                        useDpFontSizeDim(true)
                        fontSize(getNewFloatPx(16f))
                        color((getPager() as BasePager).theme.colors.mainTextColor)
                        text(ctx.attr.title)
                    }
                }
            }
        }

    }

    companion object {
        private const val BASE_64 =
            ""
    }
}


internal class NavBarViewAttr : ComposeAttr() {
    var title  by observable("")
    var rightIconShow = true
    var isDarkMode = false
}

internal class NavBarViewEvent : ComposeEvent() {
    var finishClickHandler: (() -> Unit)? = null
    var rightClickHandler: (() -> Unit)? = null

    fun onClick(handler: () -> Unit) {
        finishClickHandler = handler
    }

    fun onRightClick(handler: () -> Unit) {
        rightClickHandler = handler
    }
}

internal fun ViewContainer<*, *>.NavBar(init: NavBarView.() -> Unit) {
    addChild(NavBarView(), init)
}
